/*
 * @Author: kanglang
 * @Date: 2020-09-16 19:56:25
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-03 18:19:46
 * @Description: 自定义header
 */
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { XMHeader, _, msg } from '@/common';
import { px2dp, mainBgColorBlack, mainBgColorWhite } from '@/styles';

export default class RechargeHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

    handleFunc = () => {
      this.props.onClick ? this.props.onClick() : msg.emit('router: back');
    }

    handleRightFunc = () => {
      this.props.RightClick && this.props.RightClick();
    }

    render() {
      const { leftBackStyle, leftBackIcon, rechargeIcon,
        rightStyle, rightText, leftTitle, leftStyle, isManager = false, style } = this.props;
      return (
        <XMHeader
          style={[styles.headerOpacty, style]}
          renderLeft={() => {
            return (
              <View style={styles.leftWrap}>
                <TouchableOpacity
                  activeOpacity={0.2}
                  style={[styles.backImgContainer, leftBackStyle]}
                  onPress={this.handleFunc}
                >
                  <Image
                    style={styles.leftBack}
                    source={leftBackIcon}
                    resizeMode='stretch'
                  />
                </TouchableOpacity>
                {
                  rechargeIcon ?
                    <Image
                      style={styles.unicomRechargeWord}
                      source={rechargeIcon}
                      resizeMode='stretch'
                    /> :
                    <Text style={[styles.leftTitleStyle, leftStyle]}>{leftTitle}</Text>
                }
              </View>
            );
          }}

          renderRight={() => {
            return (
              <>
                {
                  isManager ?
                    <TouchableOpacity
                      activeOpacity={0.8}
                      style={[styles.manageRight, rightStyle]}
                      onPress={this.handleRightFunc}
                    >
                      <Text style={{ fontSize: px2dp(28), color: mainBgColorWhite }}>业务员</Text>
                      <Image style={styles.manageIcon} source={require('../images/wl/icon_salesman.png')} />
                    </TouchableOpacity>
                    :
                    <View style={styles.RightWrap}>
                      <TouchableOpacity
                        activeOpacity={0.8}
                        style={[styles.right, rightStyle]}
                        onPress={this.handleRightFunc}
                      >
                        <Text>{rightText}</Text>
                      </TouchableOpacity>
                    </View>
                }
              </>
            );
          }}
        />
      );
    }
}
const styles = StyleSheet.create({
  backImgContainer: {
    backgroundColor: 'rgba(255,255,255,0.2)',
    paddingLeft: px2dp(16) * 2,
    paddingRight: px2dp(8) * 2,
    paddingTop: px2dp(6) * 2,
    paddingBottom: px2dp(6) * 2,
    borderTopRightRadius: px2dp(50) * 2,
    borderBottomRightRadius: px2dp(50) * 2,
  },
  leftBack: {
    width: px2dp(14) * 2,
    height: px2dp(14) * 2
  },
  unicomRechargeWord: {
    width: px2dp(76) * 2,
    height: px2dp(20) * 2,
    marginLeft: px2dp(10) * 2
  },
  leftWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  headerOpacty: {
    backgroundColor: 'transparent',
    borderColor: 'transparent'
  },
  right: {
    marginRight: px2dp(28) * 2,
  },
  leftTitleStyle: {
    marginLeft: px2dp(20),
    fontWeight: 'bold',
    color: mainBgColorBlack,
    fontSize: px2dp(42)
  },
  manageRight: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: px2dp(166),
    height: px2dp(56),
    backgroundColor: '#6ECBFD',
    borderRadius: 14,
    marginRight: px2dp(32)
  },
  manageIcon: {
    width: px2dp(34),
    height: px2dp(34),
    marginLeft: px2dp(8)
  }
});
